<template>
    <div>
        <h1>4.修改数组元素的解决方案</h1>
        <p>{{arr}}</p>
        <p>{{arr[0]}}</p>
        <button @click="hdClick">点击</button>
    </div>
</template>

<script>
    export default {
        props: {

        },
        data() {
            return {
                arr: [10, 20, 30]
            };
        },
        methods: {
            hdClick() {
                //this.arr[0] = 1000  // 这种不能起到双向数据绑定，也即不能响应式

                // Object.defineProperty()是vue2的双向数据绑定原理，不支持数据单个元素的修改(触发不了set方法)
                // 在vue3的双向数据绑定换成proxy() 就支持了..
                // 在vue2中通过 this.$set(要修改的数组,要修改的下标,要修改成的值) 解决这个问题！

                
                this.$set(this.arr, 0, 1000)  
            }
        }
    };
</script>

<style scoped lang="less">

</style>